<template>
  <!-- 代办任务  日程表 -->
  <div class="taskCalendar">
    <div class="tabs" style="width: 100%">
      <div class="header">
        <el-select v-model="form.type" placeholder="请选择" size="small" style="width: 150px">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <WeChat class="select-right" :options="options" @getValue="getValue" style="width: 140px"></WeChat>
      </div>
      <div class="header-right">
        <el-select v-model="form.type" placeholder="请选择" size="small" style="width: 150px">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="form.type" placeholder="请选择" size="small" style="width: 150px">
          <el-option
            v-for="item in sendStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="timeRange">
        <el-date-picker
          v-model="timeRang"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月"
          @change="getMonth"
        >
        </el-date-picker>
      </div>
      <FullCalendar ref="fullCalendar"
                    :options="calendarOptions"
                    class="demo-app-calendar"
                    @eventClick="handleEventClick"
                    @titleClick="handleTitleClick"
      />
    </div>
    <viewMgt v-if="showViewMgt" :visableIf.sync="showViewMgt"></viewMgt>
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // 引入tippy.js的样式文
export default {
  name: "taskCalendar",
  components:{
    FullCalendar,
    'WeChat': () => import('@/views/components/WeChat.vue'),
    'viewMgt': () => import('@/views/taskCalendar/viewMgt.vue'),
  },
  data(){
    return{
      form:{
        type:0,//单号模式、多号模式
      },
      showViewMgt:false,
      timeRang:[],
      typeList:[
        {value:0, label:'单号模式',},
        {value:1, label:'多号模式',},
      ],
      statusList:[
        {value:0, label:'极速群发',},
        {value:1, label:'高级群发',},
        {value:2, label:'朋友圈',},
        {value:3, label:'批量拉群',},
      ],
      sendStatusList:[
        {value:0, label:'创建中',},
        {value:1, label:'等待中',},
        {value:2, label:'发送中',},
      ],
      options: [{
        value: 1,
        label: '小红',
        WeChatNum: 2,
        WeChatName: '智行',
      }, {
        value: 2,
        label: '小军',
        WeChatNum: 1,
        WeChatName: '锐行',
      }, {
        value: 3,
        label: '小李',
        WeChatNum: 1,
        WeChatName: '锐行',
      }],
      calendarOptions: {
        plugins: [
          // 加载插件，V5采用插件模块方式加入
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick
        ],
        height: 800, //日历高度
        width: 600,
        headerToolbar: {
          // 头部toolba
          left: '',
          center: 'prev,title,next',
          right: '',// 'timeGridDay,timeGridWeek,dayGridMonth'
        },
        handleWindowResize: true, //随浏览器窗口变化
        initialView: 'dayGridMonth', // 初始化插件显示
        // initialDate:""//初始化日期
        // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        // editable: true, //是否可编辑
        // droppable: true,//可拖拽的
        // timeZone: 'local',//采用时区
        selectable: true,
        // selectMirror: true,
        dayMaxEvents: true,
        // weekends: true, // 是否显示一周七天
        // select: this.handleDateSelect,
        // eventClick: this.handleEventClick, // 日程点击事件
        eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发
         dateClick: this.handleDateClick,//日期方格点击事件
        eventClick: this.handleEventClick, //日程点击事件
        locale: zhCnLocale,
        nextDayThreshold: '01:00:00',
        events: [
          //日程事件的json
          { tt: 'event 1', date: '2024-04-11 12:00:00',content:'这是一个内容', },
          { tt: 'event 2', date: '2024-04-11 05:59:23' ,content:'这是一个内容2', },
          { tt: 'event 3', date: '2024-04-11 08:23:00',content:'这是一个内容3',  },
          { tt: 'event 4', date: '2024-04-11 09:30:00',content:'这是一个内容4',  },
          { tt: 'event 5', date: '2024-04-11 12:00:00',content:'这是一个内容5',  },
          { tt: 'event 2', date: '2024-04-11 15:00:00',content:'这是一个内容6',  },
          { tt: 'event 2', date: '2024-04-12 15:00:00',content:'拉群任务',  }
        ],
        eventContent(arg) {
          console.log('自定义内容',arg);
          // 自定义事件内容
          return {
            html: `<div class="custom-event">${arg.event._def.extendedProps.content}</div>`,
          }
        },
      },

    }
  },
  mounted () {
    this.$nextTick(() => {
      const prevBtn = document.querySelector('.fc-prev-button')
      prevBtn.addEventListener('click', () => {
        console.log('点击prev');
      })
      const nextBtn = document.querySelector('.fc-next-button')
      nextBtn.addEventListener('click', () => {
        console.log('点击next');
      })

      })
  },
    methods:{
    // 用户将鼠标悬停在事件上时触发,这里数据做了类型判断，不同的类型数据页面悬浮框显示不用的内容
    handleEventMouseEnter(info) {
      console.log(info, 'yyyy')
      let col = info.event.borderColor
      let eve = info.event._def.extendedProps
      let category = info.event._def.extendedProps.category
      tippy(info.el, {
        content: `朋友圈 - 已完成 - 2024-04-11 15:36`,
        theme: 'light', //主题选取
        // trigger: 'click', //触发类型
        interactive: true, //可交互的
        placement: 'top-start', //悬浮框位置
        allowHTML: true, //是否允许html文本
        zIndex: 99999,
      })
    },
    handleEventClick(event) {
      console.log('event的值',event);
      // 这里处理点击事件
      this.showViewMgt=true;
    },
    handleTitleClick() {
      // 处理标题点击事件
      alert('Title was clicked!');
    },
    handleDateClick(){

    },
    getValue(obj){
      console.log('获取行',obj);
    },
    getMonth(month){
      console.log('切换月',month);
      this.$refs.fullCalendar.getApi().gotoDate(month);
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .fc-toolbar-chunk {
  >div{
    display: flex;
    align-items: center;
  }

}
::v-deep .fc .fc-button-primary {
  background: none;
}
::v-deep .fc-scrollgrid-sync-inner{
  padding: 10px 0px;
}
::v-deep .fc .fc-toolbar-title {
  font-size: 20px;
}
::v-deep .fc .fc-daygrid-day-frame {
  min-height: 150px;
}
::v-deep .fc .fc-daygrid-day-top {
  flex-direction: initial;
}
::v-deep .fc-theme-standard td, ::v-deep .fc-theme-standard th {
  border-color: #eee;
}
::v-deep .fc-day-other {
  background-color: #f2f3f4;
}
::v-deep .fc .fc-daygrid-day-frame:hover {
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .06) !important;
}
::v-deep .fc-scrollgrid-sync-inner {
  text-align: left;
}
::v-deep .fc .fc-button-primary {
  background: none;
  color: #888;
  border: none;

}
::v-deep  .fc .fc-button-primary:focus{
  box-shadow: none;
}
::v-deep .fc .fc-button-primary:not(:disabled).fc-button-active, ::v-deep .fc .fc-button-primary:not(:disabled):active {
  background: none;
  color: #888;
  border: none;
}
 ::v-deep .fc .fc-button-primary:not(:disabled).fc-button-active:focus, ::v-deep .fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none;
}
 ::v-deep .custom-event {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px;
   border-radius: 4px;
   background: rgb(255, 230, 229);
   width: 100%;
 }
 ::v-deep .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
   height: 22px;
   background: #3070ff;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
 }
 ::v-deep .fc-daygrid-dot-event.fc-event-mirror,  ::v-deep .fc-daygrid-dot-event:hover {
   background: none !important;
 }
::v-deep .fc .fc-toolbar.fc-header-toolbar {
  padding: 10px 0px;
  margin-bottom: 0px;
}
::v-deep .fc .fc-daygrid-day.fc-day-today {
  background: none;
}
 .taskCalendar {
   position: fixed;
   top: 48px;
   left: 0px;
   bottom: 0px;
   right: 0px;
   z-index: 9;
   padding: 16px;
   background:#f2f3f4;
 }
 .tabs {
   background: #fff;
   padding: 0px 10px;
   position: relative;
   .header {
     position: absolute;
     left: 10px;
     top: 10px;
     display: flex;
     .el-select {
       margin-right: 10px;
     }
   }
 }
 .header-right {
   position: absolute;
   right: 10px;
   top: 10px;
   display: flex;
   .el-select {
     margin-right: 10px;
   }
 }
.timeRange {
  position: absolute;
  top: 10px;
  display: flex;
  width: 100px;
  left: 50%;
  margin-left: -50px;
  ::v-deep .el-input__inner {
    border: none;
    background: none;
    font-size: 0px;
    cursor: pointer;
  }
  ::v-deep .el-input__prefix ,::v-deep .el-input__suffix {
    display: none;
  }
}
/* 隐藏清除按钮 */
::v-deep .el-date-editor .el-input__suffix .el-input__clear {
  display: none;
}
</style>
